import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';

import moment from 'moment';

import LayoutContentWrapper from '@iso/components/utility/layoutWrapper';
import LayoutContent from '@iso/components/utility/layoutContent';

import Modals from '@iso/components/Feedback/Modal';

import {Fieldset, Form, Label} from "../../../FirestoreCRUD/Article/Article.styles";

import ModalStyle from "../../../Feedback/Modal/Modal.styles";
import WithDirection from '@iso/lib/helpers/rtl';
import axios from "../../../../http";
import Qs from 'qs'
import message from '@iso/components/Feedback/Message';
import MessageContent from "../../../Feedback/Message/Message.styles";
import PageHeader from '@iso/components/utility/pageHeader';

const isoModal = ModalStyle(Modals);
const Modal = WithDirection(isoModal);

export default class ScheduleOverview extends React.Component {


    constructor(props) {

        super(props);

        this.state={eventList:[],userList:[],userViewList:[],modalViewVisible:false,calendarWeekends:true};

    }
    calendarComponentRef = React.createRef()



    format=(date)=>{
        return moment(date).format('YYYY-MM-DD HH:mm:ss');
    }


    eventClick=(selectionInfo)=>{
        let state={id:selectionInfo.event.id,title:selectionInfo.event.title,start:this.format(selectionInfo.event.start),end:this.format(selectionInfo.event.end),memo:selectionInfo.event.extendedProps.memo};
        let simpleUserList=selectionInfo.event.extendedProps.simpleUserList;
        let participant=new Array()
        let userViewList=new Array()
        for(let i=0;i<simpleUserList.length;i++){
            let user=simpleUserList[i];
            participant.push(user.realName+'_'+user.id)
            userViewList.push(user.name+'('+user.realName+')')
        }
        state["participant"]=participant;
        state["userViewList"]=userViewList;
        state["modalViewVisible"]=true;
        this.setState(state)
    };

    handleViewCancel = () => {
        this.setState({modalViewVisible:false})
    };


    componentDidMount() {

    }


    //save after resizing
    eventResize=(eventInfo)=>{
        this.updateStartEnd(eventInfo);
    };
    //save after dragging
    eventDrop=(eventInfo)=>{
        this.updateStartEnd(eventInfo);
    };


    updateStartEnd=(eventInfo) =>{
        this.setState({modalEditVisible:false})
    }

    loadEvents=(eventInfo,successCallback, failureCallback)=>{
        axios.post('api/oa/work/event/findAll', Qs.stringify({
            start:moment(eventInfo.start).format('YYYY-MM-DD HH:mm:ss'),
            end:moment(eventInfo.end).format('YYYY-MM-DD HH:mm:ss')
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                successCallback (data.data)
            })
            .catch(function (error) {
                this.showErrorMessage(error);
            });
    }

    showSuccessMessage (systemMessage){
        message.success(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };
    showErrorMessage (systemMessage){
        message.error(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };


    render() {
        return (
            <LayoutContentWrapper >
                <PageHeader>
                    日程总览
                </PageHeader>
                <LayoutContent>

                    <Modal
                        visible={this.state.modalViewVisible}
                        title="查看"
                        onCancel={this.handleViewCancel}
                        footer={[
                        ]}
                    >
                        <Form>
                            <Fieldset>
                                <Label>*开始时间:{this.state.start}</Label>
                            </Fieldset>
                            <Fieldset>
                                <Label>*结束时间:{this.state.end}</Label>
                            </Fieldset>
                            <Fieldset>
                                <Label>*事件名称:{this.state.title}</Label>

                            </Fieldset>
                            <Fieldset>
                                <Label>参与人:</Label>
                                {this.state.participant}
                            </Fieldset>
                            <Fieldset>
                                <Label>备注</Label>
                                {this.state.memo}

                            </Fieldset>

                        </Form>
                    </Modal>



                    <FullCalendar
                        defaultView="timeGridWeek"
                        header={{
                            left: 'prev,next today',
                            center: 'title',
                            right: 'timeGridWeek,dayGridMonth,listWeek'
                        }}

                        plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
                        ref={ this.calendarComponentRef }
                        weekends={ this.state.calendarWeekends }

                        events={(eventInfo,successCallback, failureCallback)=>{this.loadEvents(eventInfo,successCallback,failureCallback)}}

                        selectMirror={true}
                        select={(selectionInfo)=>{this.showAddModal(selectionInfo)}}

                        locale='zh-cn'
                        firstDay={1}
                        buttonText={{
                            today: '今天',
                            month: '月',
                            week: '周',
                            day: '天'
                        }}
                        allDayText='全天'
                        slotLabelFormat={{
                            hour: '2-digit',
                            minute: '2-digit',
                            meridiem: false,
                            hour12: false
                        }}

                        eventClick={this.eventClick}
                        eventResize={this.eventResize}
                        eventDrop={this.eventDrop}

                    />


                </LayoutContent>
            </LayoutContentWrapper>

        )
    }



    apiDemo = () => {

     let calendarApi = this.calendarComponentRef.current.getApi()

    }



}
